<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="output">
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
        <button class="btn">5</button>
    </div>
    <!-- button.btn*5{$} -->
   
    <script>
        // target属性
        var output = document.querySelector('#output')
        output.dataset.son
        // 事件委托： 通过事件冒泡，把自己的事情交给父元素去做
        output.onclick = function(e) {
            console.log('target', e.target.innerHTML)
            // console.log('this', this)
        }

        // var btns = document.querySelectorAll('.btn'); // 类数组
        // for(var i = 0;i < btns.length; i++){
        //     btns[i].onclick = function (e) {
        //         // console.log(e.target.innerHTML) // e.target 事件源对象：触发事件的元素 
        //         // console.log(this.innerHTML) // this指向当前绑定事件的元素
        //         // setTimeout(function(){
        //         //     console.log(this) 
        //         // }.bind(this), 100)}
        //         setTimeout(() => {
        //             console.log(this) 
        //         }, 100)} // 箭头函数没有this，只能用他外面的this
        // }
    </script>
    <!-- Function方法
        bind(指定对象)
            用于将当前函数和指定对象绑定(改变this指向)，返回一个新的函数
-->
</body>
</html>